<template>
  <a-drawer
    title="还货记录"
    placement="right"
    :closable="false"
    :visible="visible"
    @close="onClose"
    :zIndex="10"
    :width="1200"
    :destroyOnClose="true"
    :headerStyle="{ position: 'fixed', top: 0, width: '100%', background: '#fff', zIndex: 2 }"
  >
    <div class="top">
      <a-button type="primary" @click="showReplenish()">申请还货</a-button>
      <div class="tip">*请记得联系客户寄回商品！</div>
    </div>
    <div v-if="data && data.length > 0">
      <section v-for="item in data" :key="item.id">
        <div class="operation">
          <div>申请时间:{{ item.createTime }}</div>
          <div>
            <a-button type="primary" style="margin-right: 8px" @click="cancelGood(item)">取消还货</a-button>
            <a-button type="primary" style="margin-right: 8px" @click="syncOmsClick(item.id)">oms同步</a-button>
            <a-button type="primary" @click="showLogistics(item)">物 流</a-button>
          </div>
        </div>
        <div style="padding: 0 24px">
          <detail-list :col="3">
            <detail-list-item term="还货单号">{{ item.orderSn }}</detail-list-item>
            <detail-list-item term="还货状态">{{ statusType[item.status] }}</detail-list-item>
            <detail-list-item term="申请方式">{{ item.applyType == 1 ? '后台申请' : '客户申请' }}</detail-list-item>
            <detail-list-item term="oms退单编号">{{ item.omsRefundId }}</detail-list-item>
            <detail-list-item term="oms退单状态">{{ omsStatuType[item.omsStatus] }}</detail-list-item>
            <detail-list-item term="快递单号">{{ item.trackingNumber }}</detail-list-item>
          </detail-list>
          <detail-list :col="1">
            <detail-list-item term="客户地址">{{ item.send.province }}{{ item.send.city }}{{ item.send.district }}{{ item.send.address }}</detail-list-item>
            <detail-list-item term="还货地址">{{ item.receive.province }}{{ item.receive.city }}{{ item.receive.district }}{{ item.receive.address }}</detail-list-item>
            <detail-list-item term="还货备注">
              {{ item.memo }}
              <a @click="eidtClick(item.id)">编辑</a>
            </detail-list-item>
          </detail-list>
          <CommodityTable :tableData="item.boxReturnDetails" :boxId="item.boxId" :boxReturnId="item.id" @refresh="refresh"></CommodityTable>
        </div>

        <a-modal v-model="visibleModel" title="还货备注" :width="500" centered @ok="handleSubmit">
          <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
            <a-form-item label="还货备注" required>
              <a-input placeholder="请输入" :style="{ height: '100px' }" type="textarea" v-model="memo" />
            </a-form-item>
          </a-form>
        </a-modal>
      </section>
    </div>
    <div style="margin-top: 200px" v-else><a-empty /></div>
    <LogisticsModal ref="logisticsModal"></LogisticsModal>
    <ReturnGoodsModal ref="returnGoods" @refresh="refresh"></ReturnGoodsModal>
  </a-drawer>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
import CommodityTable from './commodityTable.vue'
import LogisticsModal from './logisticsModal.vue'
import ReturnGoodsModal from './returnGoodsModal'
import { getBoxReturnAllInfo, updateBoxReturnMemo, syncOms, cancelExpress, checkUnSignProduct } from '@/api/box/order'
const DetailListItem = DetailList.Item
export default {
  components: {
    DetailList,
    DetailListItem,
    CommodityTable,
    LogisticsModal,
    ReturnGoodsModal
  },
  data() {
    return {
      visible: false,
      visibleModel: false,
      id: '',
      unionId: '',
      customerLogisticsId: '',
      tableData: [],
      data: [],
      memo: '', // 还货备注
      boxReturnId: '',
      statusType: {
        0: '申请中',
        1: '已创建',
        2: '退货中',
        3: '已完成',
        4: '已揽收',
        5: '已签收'
      },
      omsStatuType: {
        10: '已创建',
        20: '退货中',
        50: '已完成'
      }
    }
  },
  methods: {
    checkUnSignProductList(id) {
      return checkUnSignProduct(id).then(res => {
        if (res.code == 0) {
          return true
        } else {
          this.$message.warning(res.msg)
          return false
        }
      })
    },
    // 申请还货
    async showReplenish() {
      let result = await this.checkUnSignProductList(this.id)
      if (result) {
        this.$refs.returnGoods.show(this.id, this.unionId, this.customerLogisticsId)
      }
    },
    // 取消还货
    cancelGood(item) {
      console.log(item)
      let params = {
        requestData: {
          mailNo: item.send.tel,
          orderId: item.id,
          type: 4
        }
      }
      cancelExpress(params).then(res => {
        if (res.code == 0) {
          this.$message.success('取消还货成功')
          this.showModel(this.id, this.unionId, this.customerLogisticsId)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    refresh() {
      this.showModel(this.id, this.unionId, this.customerLogisticsId)
    },
    onClose() {
      this.visible = false
    },
    showModel(id, unionId, customerLogisticsId) {
      this.id = id // boxReturnId
      this.unionId = unionId
      this.customerLogisticsId = customerLogisticsId
      if (id) {
        let params = {
          requestData: {
            boxId: id
          }
        }
        getBoxReturnAllInfo(params).then(res => {
          if (res.code == 0) {
            res.data.forEach(ele => {
              ele.boxReturnDetails.forEach(info => {
                info.boxReturnDetails.falg = false
              })
            })
            this.data = res.data
          } else {
            this.$message.warning(res.msg)
          }
        })
      }
      this.visible = true
    },
    showLogistics(item) {
      console.log(item, 'item')
      this.$refs.logisticsModal.show(item.boxId, item.unionId, 2)
    },
    eidtClick(id) {
      this.boxReturnId = id
      this.visibleModel = true
    },
    // OMS同步
    syncOmsClick(id) {
      this.boxReturnId = id
      let params = {
        requestData: {
          boxReturnId: this.boxReturnId
        }
      }
      syncOms(params).then(res => {
        if (res.code == 0) {
          this.$message.success('同步成功')
          this.showModel(this.id, this.unionId, this.customerLogisticsId)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 修改还货单备注
    handleSubmit() {
      if (!this.memo) {
        this.$message.warning('请填写还货单备注')
        return
      }
      let params = {
        requestData: {
          boxReturnId: this.boxReturnId,
          memo: this.memo
        }
      }
      updateBoxReturnMemo(params).then(res => {
        if (res.code == 0) {
          this.$message.success('修改成功')
          this.showModel(this.id, this.unionId, this.customerLogisticsId)
        } else {
          this.$message.warning(res.msg)
        }
        this.memo = ''
        this.visibleModel = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.top {
  margin-top: 48px;
  display: flex;
  align-items: center;
}
.tip {
  color: #f45555;
  font-weight: 500;
  font-size: 16px;
  margin-left: 24px;
}
.operation {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafafa;
  border-bottom: 1px solid #d9d9d9;
  line-height: 60px;
  padding: 0 24px;
}
/deep/ section {
  border: 1px solid #d9d9d9;
  margin-bottom: 16px;
  margin-top: 24px;
}
</style>

